<template>
  <div class="t-pa-md">
    <t-form
        style="max-width: 600px; margin-bottom: 16px"
      >
        <t-radio-group label="选择模式" labelPosition="left" :inline="true" v-model="selection"
          :options="[
            { label: '禁用', value: 'none' },
            { label: '多选', value: 'multiple' },
            { label: '单选', value: 'single' },
          ]"
        />
        <div class="tr-label-prefix-wraper tr-label-prefix-wraper-left">
          <span class="tr-label-prefix">
            <span class="t-label">
              自动过滤行
            </span>
          </span>
          <t-checkbox  v-model="showAutoFilterRow" @click="()=>{dataGrid1.showAutoFilterRow = !dataGrid1.showAutoFilterRow;}"></t-checkbox>
        </div>
        <div class="tr-label-prefix-wraper tr-label-prefix-wraper-left">
          <span class="tr-label-prefix">
            <span class="t-label">
              允许排序
            </span>
          </span>
          <t-checkbox label="" v-model="allowSort"></t-checkbox>
        </div>
    </t-form>
    <t-data-grid ref="dataGrid1"
      :selection="selection"
      fillMode='custom'
      height='300px'
      :rows="rows"
      :optColumns="optColumns"
      :allowSort="allowSort"
      :showRowNumber="showRowNumber"
      :showAutoFilterRow="showAutoFilterRow"
      :row-key="rowKey"
      :loading="loading"
      :pageIndex="pagination.page"
      :pageSize="pagination.rowsPerPage"
      :rowsNumber="pagination.rowsNumber"
      @request="onRequest"></t-data-grid>
  </div>
</template>

<script>
import options from './options'
import data from './db.json'

import { onMounted, ref } from 'vue'
export default {
  setup () {
    const rows = ref([])

    const pagination = ref({
      page: 1,
      rowsPerPage: 3,
      rowsNumber: 2001
    })

    const loading = ref(false)

    function mockQuery (props) {
      /** Start OnRequest Script */
      const { page, rowsPerPage, rowsNumber } = props.pagination
      const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage

      const startRow = (page - 1) * rowsPerPage

      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            rows: data.users.slice(startRow, startRow + fetchCount),
            rowsNumber: data.users.length,
            page,
            rowsPerPage
          })
        }, 1000)
      })

      /** END OnRequest Script */
    }

    function onRequest (props) {
      loading.value = true
      mockQuery(props).then(response => {
        rows.value = response.rows
        pagination.value.rowsNumber = response.rowsNumber
        pagination.value.page = response.page
        pagination.value.rowsPerPage = response.rowsPerPage
        loading.value = false
      })
    }

    const Widget = {}
    onMounted(() => {
      Widget.dataGrid1 = vm.dataGrid1.value
      Widget.dataGrid1.query()
    })

    const vm = {
      dataGrid1: ref(),
      pagination,
      allowSort: ref(true),
      showRowNumber: ref(true),
      showAutoFilterRow: ref(true),
      selection: ref('none'),
      selected: ref([]),
      rowKey: options.idField,
      optColumns: options.columns,
      rows,
      loading,
      onRequest
    }
    return vm
  }
}
</script>
